<template>
  <q-btn label='解 雇' color='negative' @click='showDialog=true' :disable='status===1'/>

  <q-dialog v-model='showDialog'>
    <q-card bordered>
      <q-card-section>
        <div class='text-h6'>你确认要解雇编号为{{ id }}的该司机吗？</div>
      </q-card-section>

      <q-card-actions align='right'>
        <q-btn flat class='text-primary' label='解 雇' @click='action' />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script lang='ts'>
import { defineComponent, ref } from 'vue';
import { Notify } from 'quasar';
import { useRouter } from 'vue-router';
import { deleteDriver } from 'src/services/api';

export default defineComponent({
  name: 'DeleteDriver',
  props: {
    id: {
      type: Number,
      required: true
    },
    status: {
      type: Number,
      required: true
    }
  },
  setup(props) {
    const router = useRouter();

    const showDialog = ref(false);
    const number = ref(0);

    const action = async () => {
      if (props.id) {
        try {
          const response = await deleteDriver(props.id);
          if (response.status === 0) {
            Notify.create({ message: '解雇成功！', type: 'positive', position: 'top' });
            setTimeout(() => router.go(0), 1000);
          }
        } catch (error) {
        }
      }
    };

    return {
      showDialog,
      number,
      action,
      props
    };
  }
});
</script>
<style scoped>
q-card {
  min-width: 350px;
}
</style>
